<template>
  <el-container style="height: 1000px; border: 1px solid #eee">
    <el-main>
      <router-view/>
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input v-model="form.name" placeholder="审批人" clearable></el-input>
        </el-form-item>
        <el-form-item label="咨询时间" :inline-message="'-'">
          <el-date-picker
              v-model="form.date1"
              type="date"
              placeholder="选择日期"
              :value-format=valueFormat :format=format
              :disabled-date="disabledDate"
          >
          </el-date-picker>
          -
          <el-date-picker
              v-model="form.date2"
              type="date"
              placeholder="选择日期"
              :value-format=valueFormat :format=format
              :disabled-date="disabledDate"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="searchList.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="font-size: 16px" v-loading="loading">
        <el-table-column type="index"
                         :index="indexFn"
                         prop="id"
                         label="No." width="100" align="center">
        </el-table-column>
        <el-table-column  prop="userAvatar" width="50" align="center">
          <template #default="scope" >
            <el-avatar :src="scope.row.userAvatar"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column label="咨询师" prop="name" width="180" align="center"></el-table-column>
        <el-table-column label="时长" prop="duration" width="108" align="center"></el-table-column>
        <el-table-column label="时间" prop="date" width="350" align="center"></el-table-column>
        <el-table-column label="评分" prop="rate" width="200" align="center">
          <template #default="scope" >
            <el-rate v-model="scope.row.rate" :allow-half="true"  disabled text-color="#ff9900"></el-rate>
          </template>
        </el-table-column>
        <el-table-column label="评价" prop="comment" width="200" align="center"></el-table-column>
        <el-table-column label="督导" prop="mentor" width="200" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-tooltip
                class="item"
                effect="light"
                content="查看详情"
                placement="bottom"
            >
              <el-button icon="el-icon-search" @click="lookup(scope.row)" circle></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          background
          layout="prev, pager, next"
          :current-page="currentPage"
          :total="searchList.length"
          :page-size="pageSize"
          @current-change="paging"
      >
      </el-pagination>
      <el-dialog title="详情"
                 v-model="dialogVisible"
                 width="40%">
        <el-row :gutter="40" style="height: 60px">
          <el-col :span="8"><span style="float: right;font-size: 18px;">咨询人</span></el-col>
          <el-col :span="16"><span style="float: left;font-size: 18px;">{{content.user}}</span></el-col>
        </el-row>
        <el-row :gutter="40" style="height: 60px">
          <el-col :span="8"><span style="float: right;font-size: 18px;">咨询师</span></el-col>
          <el-col :span="16"><span style="float: left;font-size: 18px;">{{content.name}}</span></el-col>
        </el-row>
        <el-row :gutter="40" style="height: 60px">
          <el-col :span="8"><span style="float: right;font-size: 18px;">日期</span></el-col>
          <el-col :span="16"><span style="float: left;font-size: 18px;">{{content.date}}</span></el-col>
        </el-row>
        <el-row :gutter="40" style="height: 60px">
          <el-col :span="8"><span style="float: right;font-size: 18px;">评价</span></el-col>
          <el-col :span="16"><span style="float: left;font-size: 18px;">{{content.completeComment}}</span></el-col>
        </el-row>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
const circleUrl = 'https://images.996pic.com/7021030b0ad843b9ab92571845d88fd1680_680.jpg'
export default {
  name: "AdminRecord",
  data(){
    return{
      valueFormat:'YYYY-MM-DD',
      format:'YYYY-MM-DD',
      currentPage:1,
      pageSize:8,
      loading:true,
      form:{
        name:'',
        date1:'',
        date2:''
      },
      disabledDate(time) {
        return time.getTime() > Date.now()
      },
      dataList:[
        {
          name:'qwe',
          userAvatar:circleUrl,
          duration:'01:12:23',
          date:'2022-03-12',
          rate:5,
          comment:'好',
          mentor:'无'
        },
        {
          name:'qwa',
          userAvatar:circleUrl,
          duration:'01:12:23',
          date:'2022-03-14',
          rate:5,
          comment:'好',
          mentor:'无'
        },
        {
          name:'qwx',
          userAvatar:circleUrl,
          duration:'01:12:23',
          date:'2022-03-16',
          rate:5,
          comment:'好',
          mentor:'无'
        }
      ],
      searchList:[],
      dialogVisible:false,
      content:{}
    }
  },
  methods: {
    lookup(row){
      this.dialogVisible=true
      this.content = row
    },
    paging(val){
      const _this = this
      _this.currentPage = val
    },
    onSubmit() {
      const _this = this
      _this.searchList = _this.filterList(_this.form)
      console.log(this.form)
    },
    indexFn(index) {
      index = (index + 1) + (this.currentPage-1) * this.pageSize
      return index
    },
    filterList(item) {
      const _this = this
      let formList = {}
      let newList = []
      for(let key in item){
        if (item[key] !== '' && item[key] !== null){
          formList[key] = item[key]
        }
      }
      console.log(formList)
      if (item.name === '' && item.date1 === null &&item.date2===null) {
        return _this.dataList
      }

      else {
        console.log(_this.dataList)
        let l = []
        l = _this.dataList
        for(let i = 0,len = l.length;i<len;++i){
          let flag = false
          //console.log(l[i])
          for(let keyy in formList){
            //console.log(keyy)
            if(keyy!=='date1'&&keyy!=='date2'){
              let str = '.*?'+item.name+'.*'
              let reg = new RegExp(str)
              if (reg.test(l[i]['name'])){

              }else{
                flag = true
              }
            }
            else{ //判断date1，date2属性是否在检索表单内，
              let sign = 0
              if (keyy==='date1'){
                sign +=1
              }
              if(keyy === 'date2'){
                sign += 10
              }
              console.log(sign)
              switch (sign){
                case 0:break
                case 1:
                  if(new Date(l[i]['date'])>=new Date(formList['date1'])){

                  }else{
                    flag=true
                  }
                  break
                case 10:
                  if(new Date(l[i]['date'])<=new Date(formList['date2'])){

                  }else{
                    flag=true
                  }
                  break
                case 11:
                  if(new Date(l[i]['date'])>=new Date(formList['date1']) &&
                      new Date(l[i]['date'])<=new Date(formList['date2'])){

                  }else{
                    flag=true
                  }
                  break
              }
            }

          }
          if (flag === false){
            newList.push(l[i])
          }
        }
        return newList
      }
    }
  },
  async created() {
    const _this = this
    await _this.$axios.get('http://106.14.247.163:8080/record/getAllConsultRecords').then(resp=>{
      let res = resp.data.data
      _this.dataList = []
      for (let item of res){

        if (item.consultant.userInfo===null){
          console.log('?')
          continue
        }
        let cvtComment = ''
        if (item.recordInfo.fromComment===null){
          cvtComment = '无'
        }
        else if(item.recordInfo.fromComment.length>10){
          cvtComment = item.recordInfo.fromComment.slice(0,10)+'...'
        }
        else {
          cvtComment = item.recordInfo.fromComment
        }
        _this.dataList.push(
            {
              user:item.visitor.userInfo.userName,
              name:item.consultant.userInfo.userName,
              userAvatar:circleUrl,
              duration:item.recordInfo.duration!==null?item.recordInfo.duration:0,
              date:item.recordInfo.datetime!==null?item.recordInfo.datetime:'1970-01-01 00:00:00',
              rate:item.recordInfo.fromGrade!==null?item.recordInfo.fromGrade:5,
              comment:cvtComment,
              mentor:item.supervisor!==null?item.supervisor.userInfo.userName:'无',
              completeComment:item.recordInfo.fromComment!==null?item.recordInfo.fromComment:'无'
            }
        )
      }
      _this.loading = false
    })
    _this.searchList = _this.dataList
  }
}
</script>

<style scoped>

</style>